<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.springframework.org/schema/data/jaxb"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LayuiCMSluyun</title>
    <link th:href="@{/managerstatic/plugins/layui/css/layui.css}" rel="stylesheet" media="all" />
</head>

<body>
    <script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
    <script th:src="@{/managerstatic/plugins/layui/layui.js}"></script>
    <script th:src="@{/managerstatic/plugins/jquery.min.js}"></script>
    <script th:src="@{/showstatic/js/echarts.js}"></script>
    <br /><br />
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <div class="layui-form" style="padding-left: 20px">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="date" class="layui-input" id="start"  placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="date" id="end" class="layui-input"  placeholder="yyyy-MM-dd">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button onclick="change()" class="layui-btn layui-btn-normal">提交</button>
                        </div>
                    </div>
                </div>
            </div>

            <div shiro:hasRole="套餐三">
                <select id="sel" onchange="change()" class="layui-input" style="width: 80px;margin-left: 130px">
                    <option value="1" selected>柱状图</option>
                    <option value="2">饼状图</option>
                </select>

            </div>
            <div class="layui-timeline-content layui-text">
                <div id="main"  style="width: 600px;height:400px;margin-left: 200px"></div>
            </div>
        </li>
    </ul>

    <script th:inline="none">

        $(function(){
            var myDate = new Date();//获取系统当前时间
            show(null,myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate());
        })

        var option;
        var myChart = echarts.init(document.getElementById('main'));
        function showPlus(startDay,endDay) {
            $.ajax({
                url: '/moviemanager/turnoverPlus',
                type: 'post',
                data: {
                    'startDay': startDay,
                    'endDay': endDay
                },
                success: function(data){
                    var arr = new Array();
                    for(var i=0;i<data.length;i++){
                        arr.push(data[i].name);
                    }
                    // 指定图表的配置项和数据
                     option = {
                        title : {
                            text: '影院营业额统计',
                            subtext: '营业额统计',
                            x:'center'
                        },
                        toolbox: {
                            feature: {
                                dataView: {},
                                saveAsImage: {
                                    pixelRatio: 2
                                },
                                restore: {}
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: arr
                        },
                        series : [
                            {
                                name: '访问次数',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:data,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            })
        }

        function show(startDay,endDay) {
            $.ajax({
                url: '/moviemanager/turnover',
                type: 'post',
                data: {
                    'startDay': startDay,
                    'endDay': endDay
                },
                success: function(data){
                    var keys = new Array();
                    var vals = new Array();
                    for(var key in data){
                            keys.push(key);
                            vals.push(data[key])
                    }
                    // 指定图表的配置项和数据
                    option = {
                        title: {
                            text: '影院营业额'
                        },
                        toolbox: {
                            feature: {
                                dataView: {},
                                saveAsImage: {
                                    pixelRatio: 2
                                },
                                restore: {}
                            }
                        },
                        tooltip: {},
                        legend: {
                            data:['营业额']
                        },
                        xAxis: {
                            data: keys
                        },
                        yAxis: {},
                        series: [{
                            name: '营业额',
                            type: 'bar',
                            data: vals
                        }]
                    };
                    myChart.setOption(option);
                }
            })
        }

        function change() {
            if($("#sel").val()==1){
                myChart.clear();
                show($("#start").val(),$("#end").val());
            }else if($("#sel").val()==2){
                myChart.clear();
                showPlus($("#start").val(),$("#end").val());
            }
        }

    </script>

</body>

</html>